<template>
    <div class="section-wrap addteamActivity">
        <div v-wechat-title="$route.meta.title=nowTitle"></div>
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>会议编号</label>
                </div>
                <div>
                    <input type="text"
                           v-model="param.MeetingNumber"
                           disabled />
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>单位名称</label>
                </div>
                <div>
                    <input class="right-msg"
                           type="text"
                           v-model="param.DeptName"
                           disabled />
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>会议名称</label>
                </div>
                <div>
                    <input class="right-msg"
                           type="text"
                           v-model="param.Name"
                           disabled />
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>会议日期</label>
                </div>
                <div>
                    <input type="text"
                           v-model="param.MeetingDate"
                           disabled />
                </div>
            </div>
            <!-- 会议地点 -->
            <div class="form-item form-item-style1"
                 v-if="!editshow">
                <div class="label-title">
                    <label>会议地点</label>
                    <i class="iconfont icon-required"></i>
                </div>

                <group>
                    <popup-picker :data="areaList"
                                  :columns="1"
                                  v-model="Location"
                                  placeholder="请选择"
                                  @on-change="selectArea"></popup-picker>
                </group>
            </div>
            <div class="form-item form-item-style1"
                 v-if="editshow">
                <div class="label-title">
                    <label>会议地点</label>
                </div>
                <div>
                    <input type="text"
                           v-model="param.Location"
                           disabled />
                </div>
            </div>
            <!-- 参会人数 -->
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>参会人数</label>
                    <i class="iconfont icon-required"
                       v-if="!editshow"></i>
                </div>
                <div>
                    <input type="text"
                           v-model="param.Persons"
                           :disabled="editshow"
                           placeholder="请输入人数" />
                </div>
            </div>
        </div>

        <div class="form-section">
            <!-- 任务分配 -->
            <div class="form-item form-item-style2"
                 v-if="!editshow">
                <div class="label-title">
                    <label>任务分配</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <x-textarea :placeholder="('请输入任务分配描述(自行换行)')"
                                :max="500"
                                :height="60"
                                v-model="param.MissionAllot"></x-textarea>
                </div>
            </div>
            <div class="form-item form-item-style2"
                 v-if="editshow">
                <div class="label-title">
                    <label>任务分配</label>
                    <i class="iconfont icon-required"></i>
                </div>
                <div>
                    <x-textarea :height="60"
                                v-model="param.MissionAllot"
                                :disabled="editshow"></x-textarea>
                </div>
            </div>
            <!-- 重要通知 -->
            <div class="form-item form-item-style2"
                 v-if="!editshow">
                <div class="label-title">
                    <label>重要通知</label>
                </div>
                <div>
                    <x-textarea :placeholder="('请输入重要通知描述(自行换行)')"
                                :max="500"
                                :height="60"
                                v-model="param.Inform"></x-textarea>
                </div>
            </div>
            <div class="form-item form-item-style2"
                 v-if="editshow">
                <div class="label-title">
                    <label>重要通知</label>
                </div>
                <div>
                    <x-textarea :height="60"
                                v-model="param.Inform"
                                :disabled="editshow"></x-textarea>
                </div>
            </div>

            <!-- 会议录音 -->
            <!-- <div class="form-item form-item-style1">
                <div class="label-title">
                <label>会议录音</label>
                </div>
                <group>
                <img :src="addimg.url" :width="addimg.wid" :height="addimg.hei" />
                </group>
            </div> -->

            <div class="form-item form-item-style2"
                 v-if="!editshow">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>会议照片</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                </div>
                <div class="upload-wrap">
                    <upload @setFormData="setFormData"></upload>
                </div>
            </div>
            <div class="form-item form-item-style2"
                 v-if="editshow">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>会议照片</label>
                    </div>
                </div>
                <div class="upload-wrap">
                    <upload v-if="photoList.length>0"
                            :imgList="photoList"></upload>
                    <strong v-else
                            class="no-img">暂无图片</strong>
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="editshow">
                <div class="label-title">
                    <label>{{PraiseName}}
                        <span v-if="spanShow">等</span>觉得很赞</label>
                </div>
                <group>
                    <img :src="PraiseSrc"
                         width="13px"
                         height="13px"
                         @click="togglePraise" />
                    <span class="zanspan">{{PraiseNum}}</span>
                </group>
            </div>
            <p class="search-btn"
               v-if="!editshow"
               @click="submitForm">提交</p>
            <myMenu></myMenu>
        </div>
    </div>
</template>
<script type="text/javascript">
import formatDate from '@/utils/formatDate'
import upload from '@/commonComponents/upload/index'
import myMenu from '@/commonComponents/menu'

export default {
    components: {
        upload,
        myMenu
    },
    data () {
        return {
            nowTitle: '',
            editshow: false, // 是否活动编辑
            userInfo: '', // 用户信息
            param: {
                'Location': '',
                'MeetingNumber': '',
                'Name': '',
                'Persons': '',
                'PraiseName': '',
                'DeptId': '',
                'DeptName': '',
                'hasPraise': false,
                'Inform': '',
                'locationId': '',
                'MeetingDate': this.getDate(1),
                'MissionAllot': '',
                'remark': '1'
            },
            formData: '',
            images: [],
            photoList: [],
            uploadLength: 0,
            areaList: [], // 会议地点名称列表
            areaLis: [], // 会议地点信息列表
            locationId: '', // 会议地点id
            Location: ['请选择'], // 选择的会议地点
            PraiseName: '', // 点赞名单
            PraiseNum: 0, // 点赞数
            PraiseSrc: '../../../static/images/yy_01.png', // 点赞图标录路径
            spanShow: false,
            addimg: {
                url: '../../../static/images/yy.jpg',
                wid: '13px',
                hei: '24px'
            }
        }
    },
    created () {
        // console.log(this.$route.meta.title)
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
        this.param.DeptId = this.userInfo.deptid
        this.param.DeptName = this.userInfo.deptname
        this.getArea()
        this.param.Name = `${this.userInfo.deptname} ${this.getDate(2)} 班前会`
        this.param.MeetingNumber = this.getMilliDate()
        let info = this.$route.query.sourceType
        if (info == 'add') {
            this.editshow = false
            this.nowTitle = '新增班前会'
            // this.addimg.url= "../../../static/images/yy.jpg"
            // this.addimg.wid= "13px"
            // this.addimg.hei="24px"
        }
        if (info == 'edit') {
            this.editshow = true
            this.nowTitle = '班组活动详情'
            // this.addimg.url= "../../../static/images/yy_01.png"
            // this.addimg.wid= "29px"
            // this.addimg.hei="29px"
            if (this.$route.query.id) {
                this.getData()
            }
        }
    },
    filters: {
        filterdata (val) {
            if (!val) {
                return false
            }
            return val.substring(0, 10)
        }
    },
    methods: {
        // 获取会议地点
        getArea () {
            let that = this
            var params = {
                'allowPaging': true,
                'business': 'GetAreas',
                'data': {
                    'deptId': this.userInfo.deptid
                },
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '7014CED683E628FAB458E8794ED86E8F',
                'userId': this.userInfo.userid
            }

            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    // console.log(res)
                    if (res.data.code == 0) {
                        let newArr = []
                        if (res.data.data) {
                            that.areaLis = res.data.data
                            res.data.data.forEach(function (item) {
                                newArr.push(item.name)
                            })
                            that.areaList = newArr
                        }
                        this.$forceUpdate()
                    } else {
                        that.$vux.toast.text(res.data.info)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        // 编辑获取数据
        getData () {
            let that = this
            var params = {
                'allowPaging': true,
                'business': 'MeetingDetails',
                'data': {
                    'ID': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': '81ACEFD7ACEE9BCDE572882A244E72B0',
                'userId': this.userInfo.userid
            }

            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    console.log(res)
                    if (res.data.code == 0) {
                        let newArr = []
                        if (res.data.data) {
                            newArr = res.data.data
                            that.param = Object.assign({}, that.param, newArr)
                            if (newArr.MeetingDate) {
                                that.$set(that.param, 'MeetingDate', newArr.MeetingDate.substring(0, 10))
                            }
                            that.photoList = newArr.Photo
                            that.PraiseName = newArr.PraiseName
                            that.PraiseNum = newArr.PraiseNum
                            if (newArr.PraiseName.split(',').length > 1) {
                                that.spanShow = true
                            } else {
                                that.spanShow = false
                            }
                            if (newArr.HasPraise) {
                                that.PraiseSrc = '../../../static/images/zai_02.png'
                            } else {
                                that.PraiseSrc = '../../../static/images/zai_01.png'
                            }
                        }
                        this.$forceUpdate()
                    } else {
                        that.$vux.toast.text(res.data.info)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        // 选择会议地点
        selectArea (val) {
            var that = this
            this.param.Location = this.Location[0]
            // console.log(val,this.param.Location)
            this.areaLis.forEach(function (item) {
                if (item.name === that.param.Location[0]) {
                    that.locationId = item.id
                }
            })
            console.log(this.locationId)
        },
        // 图片上传
        setFormData (formData, uploadLength) {
            this.formData = formData
            this.uploadLength = uploadLength
        },
        // 提交
        submitForm () {
            // console.log(this.param.Persons)
            let str = /^\d+$/
            if (!this.param.Location) {
                this.$vux.toast.text('请选择会议地点')
                return false
            }
            if (!this.param.Persons) {
                this.$vux.toast.text('请填写参会人数')
                return false
            } else if (str.test(this.param.Persons) == false) {
                this.$vux.toast.text('参会人数请填写正整数')
                return false
            } else if (!this.param.MissionAllot) {
                this.$vux.toast.text('请输入任务分配描述')
                return false
            }
            if (this.uploadLength === 0) {
                this.$vux.toast.text('请上传会议照片')
                return false
            }
            this.$vux.loading.show({
                text: '正在提交...'
            })

            this.param.locationId = this.locationId
            let params = {
                'allowPaging': true,
                'business': 'ReportMeeting',
                'data': this.param,
                'method': 'new',
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': '7014CED683E628FAB458E8794ED86E8F',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params, this.formData).then((res) => {
                // console.log(res)
                if (res.data.code === 0) {
                    this.$vux.toast.text('提交成功')
                    setTimeout(() => {
                        this.$router.push({
                            path: '/activityRecord'
                        })
                    }, 1000)
                } else {
                    this.$vux.toast.text(res.data.info)
                }
            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        // 获取点赞信息
        postPraise () {
            let that = this
            var params = {
                'allowPaging': true,
                'business': 'MeetingPraise',
                'data': {
                    'ID': this.$route.query.id
                },
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': '81ACEFD7ACEE9BCDE572882A244E72B0',
                'userId': this.userInfo.userid
            }

            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    // console.log(res)
                    if (res.data.code == 0) {
                        let newArr = []
                        newArr = res.data.data
                        that.PraiseName = newArr.PraiseNames
                        that.PraiseNum = newArr.Praise
                        if (newArr.PraiseNames.split(',').length > 1) {
                            that.spanShow = true
                        } else {
                            that.spanShow = false
                        }
                        if (newArr.HasPraise) {
                            that.PraiseSrc = '../../../static/images/zai_02.png'
                        } else {
                            that.PraiseSrc = '../../../static/images/zai_01.png'
                        }
                    } else {
                        that.$vux.toast.text(res.data.info)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        // 点赞,取消赞
        togglePraise () {
            this.postPraise()
        },
        // 获取当前年月日
        getDate (type) {
            let nowDate = new Date()
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate()
            }
            if (date.month >= 0 && date.month < 10) {
                date.month = '0' + date.month
            }
            if (date.date >= 0 && date.date < 10) {
                date.date = '0' + date.date
            }
            let systemDate = date.year + '-' + date.month + '-' + date.date
            let monthDate = date.month + '月' + date.date + '日'
            if (type == '1') {
                return systemDate || ''
            } else if (type == '2') {
                return monthDate || ''
            }
        },
        // 获取年月日时分秒
        getMilliDate () {
            let milliDate = ''
            let newDate = new Date()
            let hours = newDate.getHours() >= 10 ? newDate.getHours() : `0${newDate.getHours()}`
            let minutes = newDate.getMinutes() >= 10 ? newDate.getMinutes() : `0${newDate.getMinutes()}`
            let milliseconds = newDate.getMilliseconds()
            if (milliseconds.toString().length == 2) {
                milliseconds = `0${milliseconds}`
            } else if (milliseconds.toString().length == 1) {
                milliseconds = `00${milliseconds}`
            }
            milliDate = `${formatDate().split('-').join('')}${hours}${minutes}${milliseconds}`
            return milliDate || ''
        }
    }
}
</script>
<style scoped>
.search-btn {
    width: 200px;
    line-height: 40px;
    border-radius: 20px;
    margin: 23px auto;
    text-align: center;
    color: #fff;
    background: #2269ff;
}
.search-btn:hover {
    opacity: 8;
}

.red {
    color: red;
}
input {
    text-align: right;
    font-size: 12px;
}
.search-btn {
    width: 200px;
    line-height: 40px;
    border-radius: 20px;
    margin: 23px auto;
    text-align: center;
    color: #fff;
    background: #2269ff;
}
.search-btn:hover {
    opacity: 8;
}

.select-section {
    display: flex;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 58px;
}
.select-section .active {
    background: url(../../../static/images/selected.png) no-repeat left center;
    background-size: 17px 17px;
}
.form-item input[disabled] {
    background-color: #fff;
}
.zanspan {
    font-size: 9px;
    color: #2269ff;
    margin-left: 6px;
}
.addteamActivity .right-msg {
    width: 255px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>
<style>
.addteamActivity .form-item textarea {
    color: #999;
    font-family: 微软雅黑;
}
</style>
